<script lang="ts" setup>
import type { TrainAgentInfo } from "@/common/apis/intelligent/type"
import { getAgentInfoApi, trainedPublishApi } from "@/common/apis/intelligent"
import { FormTypeEnum } from "@/common/constants/other-keys"

import { defineOptions, onActivated, onMounted, ref } from "vue"
import { CodeEditor, SaveAs, VersionManageVue, Wiki } from "./components"
import { getProjectId } from "@/common/utils/cache/local-storage"
import { isEmpty } from "lodash-es"

defineOptions({
  name: "IntelligentView"
})
const route = useRoute()
const router = useRouter()
const agentId = ref<string>(route.query.id as string)
const agentName = ref<string>()
const activeTab = ref<number>(1)
const multipleSelection = ref<TrainAgentInfo[]>([])
const componentRef = ref()
const saveAsVisible = ref<boolean>(false)
// 常量和类型定义
const STEP_TITLES = ["代码", "Wiki", "管理"] as const
const SVG_NAMES = ["agent-code", "agent-wiki", "agent-manage"] as const
type StepTitle = typeof STEP_TITLES[number]
type StepSvg = typeof SVG_NAMES[number]
const STEP_COMPONENTS: Record<number, Component> = {
  1: CodeEditor,
  2: Wiki,
  3: VersionManageVue
}
interface Step {
  title: StepTitle
  id: number
  svg: StepSvg
  component: Component
}
// 计算属性
const steps = computed<Step[]>(() =>
  STEP_TITLES.map((title, index) => ({
    title,
    id: index + 1,
    svg: SVG_NAMES[index],
    component: STEP_COMPONENTS[index + 1]
  }))
)

function handlePublish() {
  const ids: string[] = []
  multipleSelection.value.forEach((item) => {
    ids.push(item.trained_agent_id as string)
  })
  const params = {
    agent_id: agentId.value,
    ids
  }
  trainedPublishApi(params).then(() => {
    ElMessage.success("发布成功")
    componentRef.value[2].handleClearSelection()
  })
}
function getAgentInfo() {
  agentId.value = route.query.id as string
  getAgentInfoApi(agentId.value)
    .then(({ data }) => {
      if (data) {
        agentName.value = data.agent_name
      } else {
        ElMessage("数据不存在")
        router.back()
      }
    })
}
function handleSaveAs() {
  saveAsVisible.value = true
}
function handleSaveAsClose() {
  saveAsVisible.value = false
}
const isProject = computed(() => {
  return !isEmpty(getProjectId())
})
const type = ref("agent")
onMounted(() => {
  getAgentInfo()
})

onActivated(() => {
  if (agentId.value && agentId.value !== route.query.id) {
    agentId.value = route.query.id as string
    activeTab.value = 1
    getAgentInfo()
  }
})
</script>

<template>
  <div class="app-container pager-container">
    <div class="cpi-header">
      <span class="cpi-header-text">{{ agentName }}</span>
      <div v-if="isProject">
        <el-button v-if="activeTab == 3" :disabled="multipleSelection.length < 1" type="success" @click="handlePublish">
          发布
        </el-button>
        <el-button type="warning" @click="handleSaveAs">
          另存为
        </el-button>
      </div>
    </div>
    <div class="cpi-content">
      <el-tabs v-model="activeTab" class="agent-tabs">
        <el-tab-pane v-for="step in steps" :key="step.id" :name="step.id">
          <template #label>
            <span class="custom-tabs-label">
              <SvgIcon :name="step.svg" />
              <span>{{ step.title }}</span>
            </span>
          </template>
          <component ref="componentRef" :is="step.component" :dialog-type="FormTypeEnum.CREATE"
            :id="agentId" :agent_id="agentId" :type="type" v-model:publish-agents="multipleSelection" v-model:agent-name="agentName" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <SaveAs :id="agentId" :visible="saveAsVisible" @close-dialog="handleSaveAsClose" />
  </div>
</template>

<style lang="scss" scoped>
.pager-container {
  padding-bottom: 20px !important;
}

.cpi-content {
  flex: 1;
  overflow: hidden;
}

.agent-tabs,
.el-tab-pane {
  height: 100%;
  width: 100%;
}

:deep(.agent-tabs .el-tabs__nav-scroll) {
  .el-tabs__item {
    padding: 0 20px !important;

    &:hover {
      color: #02ebc3 !important;
    }

    &.is-active {
      color: #02ebc3 !important;
    }

    &>span {
      padding: 0 13px !important;
    }
  }

  .el-tabs__active-bar {
    background-color: #02ebc3 !important;
  }
}

.custom-tabs-label {
  display: flex;
  gap: 10px;
}
</style>
